<template>
  <div ref="chartRef"></div>
</template>

<script lang="ts" setup>
import useResize from '@/hooks/useResize';
import type { MemoryInfo } from '../types/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const props = withDefaults(defineProps<{ memoryInfo: MemoryInfo }>(), {
  memoryInfo: () => {
    return {};
  }
});

//注册echart
//注意如果实例是响应式的，tootip会不生效
let chartInstance = null;
const chartRef = ref();
const chartData = ref([]);
let colors = ['#67E0E3', '#37A2DA', '#FD666D'];
//初始化chart
const initChart = () => {
  //注册echart实例
  chartInstance = proxy?.$echarts.init(chartRef.value);

  const initOption = {
    title: {
      text: '内存使用率',
      textStyle: {
        color: '#606266',
        fontWeight: 'normal',
        fontSize: 20
      },
      bottom: '18%',
      left: 'center'
    },
    series: [
      {
        type: 'gauge',
        center: ['50%', '50%'], // 仪表位置
        radius: '100%', //仪表大小
        min: 0,
        max: 100,
        splitNumber: 10,
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: [
              [0.1, 'rgb(13,211,97)'],
              [
                0.3,
                new proxy.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgb(13,211,97)'
                  },
                  {
                    offset: 0.6,
                    color: 'rgb(235,205,6)'
                  }
                ])
              ],
              [0.7, 'rgb(235,205,6)'],

              [
                0.9,
                new proxy.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'red'
                  },
                  {
                    offset: 0.8,
                    color: 'rgb(235,205,6)'
                  }
                ])
              ],
              [1, 'red']
            ]
          }
        },
        splitLine: {
          lineStyle: {
            color: '#000000'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#000000'
          }
        },
        pointer: {
          itemStyle: {
            color: new proxy.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.1,
                color: 'rgb(42,125,204)'
              },
              {
                offset: 0.8,
                color: 'rgb(13,42,86)'
              }
            ])
          }
        },
        anchor: {
          show: true,
          showAbove: true
        },
        detail: {
          formatter: '{value} %'
        }
      }
    ]
  };
  chartInstance.setOption(initOption);
};

//获取chart数据
const getChartData = (outData) => {
  chartData.value = outData;
  updateChart();
};

//更新chart图表
const updateChart = () => {
  const dataOption = {
    graphic: {
      elements: [
        // 列表标题
        {
          type: 'text',
          right: '3%',
          top: 20,
          style: {
            text: '内存使用情况',
            fontSize: 18,
            fontWeight: 'bold',
            fill: '#333'
          }
        },
        // 总量项
        {
          type: 'group',
          right: '3%',
          top: 60,
          children: [
            {
              type: 'circle',
              left: 0,
              top: 'middle',
              shape: {
                r: 5
              },
              style: {
                fill: '#5470c6'
              }
            },
            {
              type: 'text',
              left: 15,
              top: 'middle',
              style: {
                text: `总量:${props.memoryInfo.total}`,
                fontSize: 14,
                fill: '#333'
              }
            }
          ]
        },
        // 已用项
        {
          type: 'group',
          right: '3%',
          top: 90,
          children: [
            {
              type: 'circle',
              left: 0,
              top: 'middle',
              shape: {
                r: 5
              },
              style: {
                fill: '#91cc75'
              }
            },
            {
              type: 'text',
              left: 15,
              top: 'middle',
              style: {
                text: `已用:${props.memoryInfo.used}`,
                fontSize: 14,
                fill: '#333'
              }
            }
          ]
        },
        // 可用项
        {
          type: 'group',
          right: '3%',
          top: 120,
          children: [
            {
              type: 'circle',
              left: 0,
              top: 'middle',
              shape: {
                r: 5
              },
              style: {
                fill: '#fac858'
              }
            },
            {
              type: 'text',
              left: 15,
              top: 'middle',
              style: {
                text: `可用:${props.memoryInfo.free}`,
                fontSize: 14,
                fill: '#333'
              }
            }
          ]
        }
      ]
    },
    series: [
      {
        data: [
          {
            value: props.memoryInfo.usePercent
          }
        ]
      }
    ]
  };
  chartInstance.setOption(dataOption);
};
watch(
  () => props.memoryInfo,
  () => {
    if (chartInstance) {
      getChartData(props.memoryInfo);
    } else {
      nextTick(() => {
        initChart();
        getChartData(props.memoryInfo);
      });
    }
  },
  {
    deep: true,
    immediate: true
  }
);

//#region usesize
function resize() {
  chartInstance.resize();
}

// 暴露函数 （供hook调用）
defineExpose({
  getChartData,
  resize
});

useResize();
//#endregion
</script>
